<template>
    <view class="sc-nav-bar">
        <view class="nav-fixed" :style="{ background }">
            <NavBar ref="navBar">
                <template #freebar>
                    <view class="custom-navbar" :style="{ color }">
                        <slot name="left" />
                        <image
                            v-if="showBack"
                            class="saasIcon"
                            style="width: 36rpx; height: 36rpx"
                            src="/static/left.png"
                            @click="$emit('click')"
                        />
                        <view class="title">
                            <slot />
                        </view>
                    </view>
                </template>
            </NavBar>
        </view>
        <!-- 占位 -->
        <NavBar v-if="isPlaceholder" />
    </view>
</template>

<script>
export default {
    props: {
        //isPlaceholder //是否占位
        isPlaceholder: {
            type: Boolean,
            default: true
        },
        //返回按钮背景色
        backColor: {
            type: String,
            default: "#000000" //#fff
        },
        // 是否显示回退按钮
        showBack: {
            type: Boolean,
            default: true
        },
        //背景颜色
        background: {
            type: String,
            default: "#EDEDED" //linear-gradient(180deg, #2698fb 0%, #0066ff 100%)
        },
        //标题字体颜色
        color: {
            type: String,
            default: "#000000" //#fff
        }
    },
    data() {
        return {};
    }
};
</script>
<style lang="scss" scoped>
.sc-nav-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;

    .nav-fixed {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }

    .custom-navbar {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        padding-right: 30rpx;
        padding-left: 30rpx;
        position: relative;

        .saasIcon {
            position: absolute;
            left: 30rpx;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
        }

        .title {
            font-size: 30rpx;
            flex: 1;
            text-align: center;
            font-weight: 500;
        }
    }
}
</style>
